<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <title>Title</title>
    <style>
        /* 全局 */
        *{ box-sizing: border-box;font-family: "Lato";}
        body{ border-top: 2px solid #55bb55;}
        .title{height: 46px;line-height: 40px;margin-top: 15px; border-bottom: 1px solid #ccc;}

        /* 折叠按钮 */
        .header{ height: 42px; line-height: 42px; border-bottom: 1px solid #ccc; position: relative;}
        .header .logo{ display: inline-block;margin: 0;font-weight: bold;}
        .nav-responsive-link{ position: absolute; top:50%;right: 0; margin-top: -10px; line-height: 8px; cursor: pointer; }
        .icon-menu{ width: 18px; height: 18px;transform: translateZ(0);-moz-transform: translateZ(0);-webkit-transform: translateZ(0);
        -o-transform: translateZ(0);}
        .icon-menu .icon-menu-line{ background: #2b2b2b; height: 3px; margin-bottom: 3px; position: relative;border-radius:3px; 
            transition: all .2s ease;}
        .icon-menu .icon-menu-line-1.is-active{ top: 6px; transform: rotate3d(0,0,1,45deg);-moz-transform: rotate3d(0,0,1,45deg);
            -webkit-transform: rotate3d(0,0,1,45deg);-o-transform: rotate3d(0,0,1,45deg);}
        .icon-menu .icon-menu-line-2.is-active{ opacity: 0;}
        .icon-menu .icon-menu-line-3.is-active{ top: -6px; transform: rotate3d(0,0,1,-45deg); -moz-transform: rotate3d(0,0,1,-45deg);
            -webkit-transform: rotate3d(0,0,1,-45deg); -o-transform: rotate3d(0,0,1,-45deg);}

        /* 弹出层 */
        .coverbox{width:240px;background-color: rgba(000, 000, 000, .7); position: fixed; left: -240px; top:0; bottom: 0; 
            transform: translateX(0);-moz-transform: translateX(0);-webkit-transform: translateX(0);-o-transform: translateX(0);
            transition: all .2s ease;-moz-transition: all .2s ease;-webkit-transition: all .2s ease;-o-transition: all .2s ease;
            z-index: 9;
        }
        .coverbox-show{ transform: translateX(240px);-moz-transform: translateX(240px);-webkit-transform: translateX(240px);
            -o-transform: translateX(240px);transition: all .2s ease;-moz-transition: all .2s ease;-webkit-transition: all .2s ease;
        -o-transition: all .2s ease;}
        
        
        .c2{ border: 1px solid #ccc; margin: 20px auto; padding: 20px 0;}
        .c2-box{ width: 100%; text-align: center; overflow: hidden;border-radius:4px;display: inline-flex; }
        .c2-box img{ width: 100%; height: 100%; display: block;transform: rotate(0deg);transition-duration: .25s;opacity: .8; }
        .c2-box img:hover{ transform: rotate(180deg);transform: scale3d(1.5,1.5,1); transition-duration: .25s; opacity: 1;}

        /* 导航 */
        .ol-list{ padding: 15px;}
        .ol-list .list-item{ height: 45px; line-height: 45px; padding-left: 10px; border-bottom: 1px solid #888; margin-bottom: 10px;
        list-style: none;}
        .ol-list .list-item a{ color:#fff;font-size: 14px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="logo">It's my LOGO</div>
            <div class="nav-responsive-link">
                <div class="icon-menu">
                    <div class="icon-menu-line icon-menu-line-1 "></div>
                    <div class="icon-menu-line icon-menu-line-2 "></div>
                    <div class="icon-menu-line icon-menu-line-3 "></div>
                </div>
            </div>
        </div>
    </div>

    <div class="coverbox">
        <ol class="ol-list">
            <li class="list-item"><a href="">首页</a></li>
            <li class="list-item"><a href="">文章</a></li>
            <li class="list-item"><a href="">随笔</a></li>
            <li class="list-item"><a href="">留言</a></li>
            <li class="list-item"><a href="">心情日记</a></li>
        </ol>
    </div>

    <div class="container">
        <h5 class="title">picture show</h5>
        <div class="row c2">
            <div class="col-md-4">
                <div class="c2-box c2-box-1">
                    <img src="images/t-3.jpg" alt="">
                </div>
            </div>
            <div class="col-md-4 c2-box c2-box-2">
                <div class="c2-box c2-box-1">
                   <img src="images/login-bg2.jpg" alt="">
                </div>
            </div>
            <div class="col-md-4 c2-box c2-box-3">
                <div class="c2-box c2-box-1">
                   <img src="images/t-2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <script>
        //条件显示弹出层
        var flag = false;
        $('.nav-responsive-link').on('click',function(e){
            var ev = e || window.event;
            ev.stopPropagation();
            if(!flag){
                $('.icon-menu-line').addClass('is-active');
                $('.coverbox').addClass('coverbox-show');
                flag = true;
            }else{
                $('.icon-menu-line').removeClass('is-active');
                $('.coverbox').removeClass('coverbox-show');
                flag = false;
            }
        })
        
        //弹出层内部元素禁止事件向上冒泡
        $('.coverbox').on('click',function(e){
            var ev = e || window.event;
            ev.stopPropagation();
        })
        
        //关闭弹出层
        $(document).on('click',function(){
            $('.icon-menu-line').removeClass('is-active');
            $('.coverbox').removeClass('coverbox-show');
            flag = false;
        })
    </script>
</body>

</html>